<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <div class="header d-flex mb-20">
      <MyButton class="add mr-20" icon="el-icon-plus" @click="handleAdd">{{
        $t("common.add")
      }}</MyButton>
    </div>
    <MyTable
      :data="tableData"
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        sortable
        width="180"
        type="index"
        :label="$t('common.order_number')"
      ></el-table-column>
      <el-table-column
        prop="lib_name"
        :label="$t('renxiangkuguanli.lib_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="vehicle_num"
        :label="$t('renxiangkuguanli.picture_no')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="create_time"
        :label="$t('common.create_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="180">
        <template slot-scope="scope">
          <MyButton
            class="text"
            type="text"
            size="small"
            @click="handleManagement(scope.row)"
            >{{ $t("manage") }}</MyButton
          >
          <span class="ml-10 mr-10">|</span>
          <MyButton
            class="text"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.edit") }}
          </MyButton>
          <span class="ml-10 mr-10">|</span>
          <MyButton
            class="text"
            type="text"
            size="small"
            @click="handleDelete(scope.row)"
            >{{ $t("common.delete") }}</MyButton
          >
        </template>
      </el-table-column>
    </MyTable>
    <Pagination
      v-show="total_num > 10"
      :total="total_num"
      :page.sync="pageNumber"
      :limit.sync="qry_len"
      @pagination="getList()"
    />
    <EditDialog
      :visible.sync="isAddDialogShow"
      :row="row"
      :type="editType"
      @refresh="getList"
    />
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getLibList, deleteLib } from "./service";
import EditDialog from "./EditDialog.vue";
import util from "@/utils";
export default {
  components: {
    MyButton,
    EditDialog,
  },
  data() {
    return {
      tableData: [],
      row: {},
      editType: "add",
      isAddDialogShow: false,
      lib_type: void 0,
      qry_len: 50,
      pageNumber: 1,
      total_num: 0,
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    start_no: {
      get() {
        return 1 + this.qry_len * (this.pageNumber - 1);
      },
    },
  },
  methods: {
    handleManagement(row) {
      this.$router.push({
        name: "vehicleTable",
        query: { lib_name: row.lib_name, lib_id: row.lib_id },
      });
    },
    handleConfirm() {
      this.getList();
    },
    async getList() {
      const params = {
        qry_len: this.qry_len,
        start_no: this.start_no,
      };
      const res = await getLibList(params);
      this.tableData = res.data.record.map((item) => {
        return {
          ...item,
          create_time: item.create_time || "--",
        };
      });
      this.total_num = res.data.total_num;
    },
    handleSearch() {
      this.pageNumber = 1;
      this.getList();
    },
    handleReset() {
      this.lib_type = void 0;
      this.pageNumber = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.qry_len = val;
      this.getList();
    },
    handleAdd() {
      this.isAddDialogShow = true;
      this.editType = "add";
    },
    handleEdit(row) {
      this.isAddDialogShow = true;
      this.editType = "edit";
      this.row = { ...row };
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("deleteVehicleLibrayTip"),
        this.$t("deleteVehicleLibTitle"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        let res = await deleteLib({ lib_id: row.lib_id });
        if (res.code == 0) {
          util.msg.success("deleteSuccess");
          this.getList();
        }
        // 直接删除
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
</style>
